<template>
  <div class="inbound-config-management-container">
    <el-card shadow="never" class="config-card">
      <div class="section-title">基础配置</div>
      <div class="config-section">
        <div class="config-item" v-show="false">
          <el-checkbox v-model="receiveNoRequired"/>
          <span>自定义出库流程</span>
          <el-button type="info" style="font-weight: bold;margin: 0 0 0 5px">点击设置</el-button>
          <span class="tip-text">（当勾选后，满足条件的订单将按该流程进行出库）</span>
        </div>

        <div class="config-item">
          <el-checkbox v-model="allowReceiveExceeded"/>
          <span>订单自动出库</span>
          <span class="tip-text">（当勾选后，订单至待出库环节每十五分钟轮询自动发货）</span>
        </div>

        <div class="config-item" v-show="false">
          <el-checkbox v-model="allowReceiveNew"/>
          <span>波次订单允许通过订单号扫描</span>
          <span class="tip-text">（当勾选后，PDA端可在波次拣货界面通过订单号定位所属波次）</span>
        </div>

        <div class="config-item" v-show="false">
          <el-checkbox v-model="enableBatchQuery"/>
          <span>耗材商品不管控库存</span>
          <span class="tip-text">（当勾选后，耗材商品仅用于出库单查询记录，不做库存管理，无需入库）</span>
        </div>
        <div class="config-item" style="padding-left:22px" v-show="false">
          <span>超时</span>
          <el-input v-model="customRatio" class="input-width"/>
          <span>分钟未处理订单标记</span>
          <el-select v-model="overflowRatio" class="select-width" style="margin: 0 10px;">
            <el-option label="百分比" value="百分比"/>
            <el-option label="固定值" value="固定值"/>
          </el-select>
          <span>提示</span>
          <span class="tip-text">（当订单在某一个流程超时x分钟未进入下一流程时，系统自动标记处理）</span>
        </div>
        <div class="config-item" style="padding-left:22px">
          <span>批次有效期低于</span>
          <el-input v-model="customRatio" class="input-width"/>
          <span>天时禁售</span>
          <span class="tip-text">（勾选后，出库订单入出库库批次商品时，若有效期低于x天则不被自动锁定）</span>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="config-card">
      <div class="section-title">货位锁定</div>
      <div class="config-section">
        <div class="config-item">
          <el-checkbox v-model="recommendLocations"/>
          <span style="display: inline-block;width: 145px">拣货库位锁定</span>
          <el-select v-model="recommendLocationType" class="select-width" style="width: 200px">
            <el-option label="请选择" value=""/>
            <el-option label="入库时间先进先出" value="入库时间先进先出"/>
            <el-option label="清仓优先" value="清仓优先"/>
            <el-option label="拣货优先" value="拣货优先"/>
            <el-option label="效率优先" value="效率优先"/>
            <el-option label="集中分配" value="集中分配"/>
            <el-option label="货位优先" value="货位优先"/>
            <el-option label="生产时间早产先出" value="生产时间早产先出"/>
            <el-option label="生产时间晚产先出" value="生产时间晚产先出"/>
          </el-select>
          <el-tooltip
              class="box-item"
              effect="dark"
              content="Right Bottom prompts info"
              placement="right"
          >
            <template #content>
              <div style="width: 550px;">
                <h3 style="padding-bottom: 5px">订单锁定货位仅针对拣货货位</h3>
                <div>
                  1、入库时间先进先出：货品存在多个货位时，从入库时间最早的货位开始分配，直到能够满足所需数量为止，同一货位以最新入库时间为准
                </div>
                <div>2、清仓优先：货品存在多个货位时，从货位库存最少的货位开始分配，直到能够满足所需数量为止</div>
                <div>
                  3、拣货优先：货品存在多个货位时，从能够满足数量的、最小的货位个数组合中配货，尽量集中配货
                </div>
                <div>
                  4、效率优先：货品存在多个货位时，从货位库存最大的货位开始分配，直到能够满足所需数量为止
                </div>
                <div>
                  5、集中分配：发货单中含有多个货品时，如果在同一个通道内能够满足所有货品的分配需求，则分配该通道；同一个通道内不满足时，则分配到能满足的同一个库区内。
                </div>
                <div>
                  6、货位优先：货品存在多个货位时，从货位排序最小的货位进行分配，排序相同的按照货位名称升序进行分配，直到能满足数量所需为止。
                </div>
                <div>
                  7、生产时间早产先出：货品为批次商品时，从生产时间最早的商品开始寻找货位，若有同生产时间商品在多个货位，则按货位名称升序进行分配，直到能够满足所需数量为止（非批次商品则默认按入库时间先进先出）
                </div>
                <div>
                  8、生产时间晚产先出：货品为批次商品时，从生产时间最晚的商品开始寻找货位，若有同生产时间商品在多个货位，则按货位名称升序进行分配，直到能够满足所需数量为止（非批次商品则默认按入库时间先进先出）
                  选择后货位锁定以所选方式进行商品货位锁定，默认按入库时间先进先出
                </div>
              </div>
            </template>
            <el-icon class="icon-warning">
              <WarningFilled/>
            </el-icon>
          </el-tooltip>
        </div>

        <div class="config-item">
          <el-checkbox v-model="recommendLocations"/>
          <span style="display: inline-block;width: 145px">打回临时存放库位</span>
          <el-select v-model="defectiveLocation" filterable class="select-width" style="width: 200px">
            <el-option label="请选择" value=""/>
          </el-select>
          <span class="tip-text">（仅展示暂存位，订单被取消后已拣商品打回放至该库位）</span>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="config-card">
      <div class="section-title">自定义收货字段</div>
      <div class="config-section">
        <el-row :gutter="10">
          <el-col v-for="(field, index) in customFields" :key="index" :lg="12" :sm="24">
            <div class="config-item">
              <span style="display: inline-block;max-width: 110px;min-width: 100px">自定义字段{{ index + 1 }}</span>
              <el-input v-model="field.name" class="field-input" style="margin-left: 0"/>
              <span style="padding-right: 8px;white-space: nowrap;">格式</span>
              <el-select v-model="field.type" class="select-width">
                <el-option label="文本" value="text"/>
                <el-option label="数字" value="number"/>
                <el-option label="时间" value="datetime"/>
              </el-select>
              <el-checkbox style="padding-left: 8px" v-model="field.enabled">启用</el-checkbox>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <div class="action-footer">
      <el-button type="primary" @click="saveConfig">保存</el-button>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import {WarningFilled} from '@element-plus/icons-vue'

// 基本配置
const receiveNoRequired = ref(false)
const allowReceiveExceeded = ref(false)
const overflowRatio = ref('') //选择单位
const customRatio = ref('')
const allowReceiveNew = ref(false)
const enableBatchQuery = ref(false)

// 入库推荐
const recommendLocations = ref(false)
const recommendLocationType = ref('')
const defectiveLocation = ref('')
const brandLocation = ref('')

// 自定义字段
const customFields = ref([
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
  {name: '', type: '', enabled: false},
])

// 保存配置
const saveConfig = () => {
  console.log('保存入库配置')
  // 实际保存逻辑
}
</script>

<style lang="scss" scoped>
.inbound-config-management-container {
  padding: 0;
  max-height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;

  .config-card {
    position: relative;
    flex: 1;
    margin: 20px 0 10px 0;
    overflow: visible;

    .section-title {
      position: absolute;
      top: -15px;
      font-size: var(--el-font-size-medium);
      font-weight: bold;
      background-color: #ffffff;
      height: 30px;
      line-height: 30px;
      padding: 0 7px;
    }

    .config-section {
      font-size: var(--el-font-size-base);

      .config-item {
        margin: 10px 0;
        display: flex;
        align-items: center;

        .el-checkbox {
          padding-right: 8px;
        }

        .select-width {
          width: 150px;
        }

        .input-width {
          width: 150px;
          padding: 0 8px;
        }
      }
    }
  }


  .field-input {
    width: 180px;
    margin: 0 10px;
  }

  .tip-text {
    font-size: var(--el-font-size-base);
    color: #3373CA;
  }

  .icon-warning {
    color: #F56C6C;
    font-size: var(--el-font-size-medium);
    margin-left: 5px;
    cursor: pointer;
    position: relative;
  }

  .action-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style> 